<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>分类管理</span>
      <el-button size="mini" type="primary" class="el-icon-plus" @click="addClassifyBtnFn" style="float: right">
        添加
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="table_list">
      <el-table :data="tableData" style="width: 100%" :max-height="$store.state.tableHeight">
        <el-table-column prop="id" type="index" label="序号" width="180"></el-table-column>
        <el-table-column prop="name" label="名称" width="300"></el-table-column>
        <el-table-column prop="alias" label="别名" width=""></el-table-column>
        <el-table-column label="编辑" align="">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini"
              @click="updateClassifyBtnFn(scope.row)">编辑</el-button>
            <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red"
              title="这是一段内容确定删除吗？" @confirm="delClassifyBtnFn(scope.row.id)">
              <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹出层 对话框 -->
    <el-dialog :title="isEdit ? '更新分类' : '添加分类'" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
      @closed="addCloseFn">
      <el-form ref="classifyFormRef" :model="classifyForm" label-width="80px" :rules="rules">
        <el-form-item label="名称" prop="name" label-width="60px">
          <el-input v-model="classifyForm.name"></el-input>
        </el-form-item>
        <el-form-item label="别名" prop="alias" label-width="60px">
          <el-input v-model="classifyForm.alias"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <Pagination /> -->
    <Pagination :total="total" @pagination="handlePageChange" />
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import {
  addClassifyAPI,
  delClassifyAPI,
  getClassifyListAPI,
  uptClassifyAPI,
} from "@/api";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      // 分页
      total: 0,
      pagenum: 1,
      pagesize: 9,
      dialogVisible: false,
      isEdit: false, //ture 编辑 false 新增
      editId: "", //编辑id
      tableData: [],
      classifyForm: {
        name: "",
        alias: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        alias: [
          { required: true, message: "请输入分类别名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 分页
    handlePageChange(obj) {
      console.log(obj);
      this.pagenum = obj.pagenum;
      this.pagesize = obj.pagesize;
      this.getList();
    },
    // 获取分类
    async getList() {
      const res = await getClassifyListAPI(this.pagenum, this.pagesize);
      console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
      // this.$store.state.classifyTotal = res.data.total;
      // this.$axios({
      //   methods: "GET",
      //   url: "http://localhost:3000/classify",
      // }).then((res) => {
      //   // console.log(res);
      //   if (res.status == 200) {
      //     this.tableData = res.data;
      //   }
      // });
    },
    // 添加 分类框
    addClassifyBtnFn() {
      this.isEdit = false;
      this.dialogVisible = true;
    },
    // 更新 分类框
    updateClassifyBtnFn(obj) {
      this.isEdit = true;
      this.dialogVisible = true;
      this.editId = obj.id;
      this.$nextTick(() => {
        // this.classifyForm = obj;
        this.classifyForm.name = obj.name;
        this.classifyForm.alias = obj.alias;
      });

      console.log(obj);
    },
    // 提交 添加/更新 分类
    onSubmit() {
      this.$refs.classifyFormRef.validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            console.log(this.classifyForm);
            const res = await uptClassifyAPI({
              ...this.classifyForm,
              id: this.editId,
            });
            if (res.data.status === 0) {
              this.$message.success("编辑分类成功！");
            } else {
              this.$message.error("编辑分类失败！");
            }
          } else {
            const res = await addClassifyAPI(this.classifyForm);
            console.log(res);
            if (res.data.status === 0) {
              this.$message.success("添加分类成功！");
            } else {
              this.$message.error("添加分类失败！");
            }
          }
        } else {
          return false;
        }
        this.dialogVisible = false;
        this.getList();
      });
    },
    // 删除分类
    async delClassifyBtnFn(id) {
      const res = await delClassifyAPI(id);
      if (res.data.status === 0) {
        this.$message.success("删除分类成功！");
      } else {
        this.$message.error("删除分类失败！");
      }
      this.getList();
    },
    // 对话框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    addCloseFn() {
      console.log(123);
      this.$refs.classifyFormRef.resetFields();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style></style>
